
<template>
  <div class="main">
    <tab v-model="activeIndex">
      <tab-item @on-item-click="tabClick">货物申报</tab-item>
      <tab-item @on-item-click="tabClick">舱单申报</tab-item>
    </tab>
    <div
      class="declare-content"
      v-bind:style="{height: contentHeight + 'px'}"
      v-show="activeIndex === 0"
    >
      <list
        :config="goodScrollConfig"
        @init="onInitGood"
        @refresh="onRefreshList"
        @loadmore="onLoadMoreGood"
        ref="goodList"
      >
        <div id="huowu" slot="scrollContent">
          <div class="bigtitle">
            <h1>
              货物申报
              <span class="futit">Declaration of goods</span>
            </h1>
          </div>
          <!-- <list class="wrapper" :data="goodList" :pulldown="true" @pulldown="loadData"> -->
          <ul class="good-container">
            <li
              class="vux-form-preview weui-form-preview"
              v-for="(item,index) in goodList"
              v-bind:key="index"
            >
              <div class="weui-form-preview__hd">
                <label class="weui-form-preview__label">报关单号</label>
                <em class="weui-form-preview__value">{{item.seqNo}}</em>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">提单号</label>
                  <span class="weui-form-preview__value">{{item.cusEntryId}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申报日期</label>
                  <span class="weui-form-preview__value">{{item.cusDDate}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申报状态</label>
                  <span
                    class="weui-form-preview__value"
                    v-bind:class="{'orangefont':item.recCode=='审核中','redfont' : item.recCode=='未通过','greenfont': item.recCode=='已通过'}"
                  >{{item.recCode}}</span>
                </div>
              </div>
              <div class="weui-form-preview__ft">
                <a
                  class="weui-form-preview__btn weui-form-preview__btn_default"
                  @click="goGoodDetail(item.seqNo)"
                >
                  <span>查看详情</span>
                </a>
              </div>
            </li>
          </ul>
          <!-- </list> -->
        </div>
      </list>
    </div>
    <div
      class="declare-content"
      v-bind:style="{height: contentHeight + 'px'}"
      v-show="activeIndex === 1"
    >
      <MList
        :config="mainfestScrollConfig"
        @init="onInitMainfest"
        @refresh="onRefreshList"
        @loadmore="onLoadMoreMainfest"
        ref="mainfestList"
      >
        <div id="cangdan" slot="scrollContent">
          <div class="bigtitle">
            <h1>
              舱单申报
              <span class="futit">Declaration of goods</span>
            </h1>
          </div>

          <ul class="cangdan-wrapper">
            <li
              class="vux-form-preview weui-form-preview"
              v-for="(item,index) in mainfestList"
              v-bind:key="index"
            >
              <div class="weui-form-preview__hd">
                <label class="weui-form-preview__label">单 号</label>
                <em class="weui-form-preview__value">{{item.manifestNo}}</em>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">船 名</label>
                  <span class="weui-form-preview__value">{{item.shipName}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">航 次</label>
                  <span class="weui-form-preview__value">{{item.voyNo}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申报日期</label>
                  <span class="weui-form-preview__value">{{item.declareDate}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申报状态</label>
                  <span
                    class="weui-form-preview__value"
                    v-bind:class="{'orangefont':item.declareStatus=='审核中','redfont' : item.declareStatus=='未通过','greenfont': item.declareStatus=='已通过'}"
                  >{{item.declareStatus}}</span>
                </div>
              </div>
              <div class="weui-form-preview__ft">
                <a
                  class="weui-form-preview__btn weui-form-preview__btn_default"
                  @click="goMaifestDetail(item.voyNo)"
                >
                  <span>查看详情</span>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </MList>
    </div>
  </div>
</template>


<script>
import { cookie } from "vux";
import List from "./common/ListView";
import { setTimeout } from "timers";
export default {
  name: "mydeclare1",
  props: ["type"],
  components: {
    List,
    MList: List
  },
  data() {
    return {
      activeIndex: 0,
      goodList: [],
      mainfestList: [],
      goodPager: {
        pageNum: 1,
        pageSize: 10
      },
      mainfestPager: {
        pageNum: 1,
        pageSize: 10
      },
      contentHeight: "auto",
      goodScrollConfig: {
        wrapper: "goodScroll",
        mutationObserver: true,
        refresh: true,
        loadmore: true
      },
      mainfestScrollConfig: {
        wrapper: "mainfestScroll",
        mutationObserver: true,
        refresh: true,
        loadmore: true
      },
      goodScroller: null,
      mainfestScroll: null
    };
  },
  // computed: {
  //   countGoodContainer() {
  //     return this.countHeight(".good-container");
  //   },
  //   countMainfestContainer() {
  //     return this.countHeight(".cangdan-wrapper");
  //   }
  // },
  methods: {
    tabClick(index) {
      this.activeIndex = index;
      if (
        (index === 0 && this.goodPager.pageNum === 1) ||
        (index === 1 && this.mainfestPager.pageNum === 1)
      ) {
        this.fetchData();
      }
    },
    /**
     * countHeight 计算容器高度
     */
    countHeight(selector) {
      return (
        document.body.clientHeight -
        document.querySelector(".weui-tabbar").clientHeight -
        document.querySelector(selector).offsetTop
      );
    },
    fetchData() {
      let url, params, _target;
      if (this.activeIndex === 0) {
        url = "/declare/goodList";
        params = this.goodPager;
        _target = this.$refs.goodList;
        // console.info("000", _target);
      } else {
        url = "/declare/manifestList";
        params = this.mainfestPager;
        _target = this.$refs.mainfestList;
        // console.info("111", _target);
      }
      // let userInfo = cookie.get("userinfo");
      // userInfo = userInfo ? JSON.parse(userInfo) : {};
      this.$http({
        url: url,
        // headers: {
        //   "x-token": userInfo.token
        // },
        params: params
      })
        .then(resp => {
          if (resp.code === 200) {
            // this.data = resp.data;
            if (this.activeIndex === 0) {
              if (this.goodPager.pageNum > 1) {
                this.goodList = this.goodList.concat(resp.data.dataList);
              } else {
                this.goodList = resp.data.dataList;
              }
            } else {
              if (this.mainfestPager.pageNum > 1) {
                this.mainfestList = this.mainfestList.concat(
                  resp.data.dataList
                );
              } else {
                this.mainfestList = resp.data.dataList;
              }
            }
            _target &&
              (_target.loadmore =
                resp.data.pageNum * resp.data.pageSize < resp.data.total);
          } else {
            this.$vux.toast.text("请求列表数据失败");
            if (this.activeIndex === 0) {
              this.goodPager.pageNum -= 1;
            } else {
              this.mainfestPager.pageNum -= 1;
            }
          }
          //防止返回当前页面时高度计算错误
          this.contentHeight = this.countHeight(".declare-content");

          this.$nextTick(() => {
            _target && _target.refresh();
          });
        })
        .catch(() => {
          this.$nextTick(() => {
            _target && _target.refresh();
          });
        });
    },
    onInitGood(scroller) {
      this.goodScroller = scroller;
    },
    onRefreshList() {},
    onLoadMoreGood() {
      // console.info('loadmore--');
      this.goodPager.pageNum += 1;
      this.fetchData();
    },
    onInitMainfest(scroller) {
      this.mainfestScroll = scroller;
    },
    onRefreshList() {},
    onLoadMoreMainfest() {
      // console.info("onLoadMoreMainfest--");
      this.mainfestPager.pageNum += 1;
      this.fetchData();
    },
    goGoodDetail(seqNo) {
      // console.info("seqpno---", seqNo);
      this.$router.push(`/Mydeclare1/GoodDetail/${seqNo}`);
    },
    goMaifestDetail(voyNo) {
      this.$router.push(`/Mydeclare1/MainfestDetail/${voyNo}`);
    }
  },
  beforeMount() {
    this.activeIndex = this.type === "good" ? 0 : 1;
    this.fetchData();
    // if(this.type === 'good') {
    //   this.activeIndex = 0;
    // }else{
    //   this.activeIndex = 1;
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.contentHeight = this.countHeight(".declare-content");
      // console.info("mounted---", this.contentHeight);
    });

    // this.fetchData();
  }
};
</script>
<style lang="less">
@import "../styles/weui/widget/weui_cell/weui_form/weui-form-preview.less";
.vux-form-preview {
  overflow: hidden;
}
.declare-content {
  overflow: hidden;
  position: relative;
}
</style>